<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="modalTitle"
    :default-fullscreen="false"
    :show-ok-btn="true"
    @ok="onButtonOkClick"
  >
    <Description
      size="middle"
      title="文章"
      :bordered="false"
      :column="1"
      :data="article"
      :schema="articleBasicInfoSchema"
    />
    <a-divider />
    <BasicForm @register="registerArticleOperateForm" />
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive, unref } from 'vue';
  import { Description } from '/@/components/Description/index';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable } from '/@/components/Table';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { Divider, Tag } from 'ant-design-vue';

  import { useMessage } from '/@/hooks/web/useMessage';
  import { OperationTypeEnum } from '/@/enums/appEnum';
  // const { createMessage, createErrorModal } = useMessage();
  const { createMessage } = useMessage();

  import { articleBasicInfoSchema, articleOperateFormSchema } from './articles.data';
  import { nopassArticle, recallArticle, deleteArticle } from '/@/api/cms/article'; // api

  export default defineComponent({
    name: 'CmsArticleOperate',
    components: { Description, BasicTable, [Divider.name]: Divider, BasicModal, Tag, BasicForm },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      //弹出窗口界面是新增数据、修改数据还是重新处理数据；根据传递过来的参数进行判断
      const op = ref(OperationTypeEnum.UN_KNOWN);
      //定义具体的操作类型，op中传入的自定义，operateType取值定义如下：
      //审核不通过-3，发布撤回-5，删除-9
      const operateType = ref<number>(0);
      const moduleName = ref<string>('模块名称');
      //标题--根据传入的模块名称+操作类型组合得到
      const modalTitle = ref('标题');
      const article = reactive({ id: '', title: '' });
      const isreview = ref(false);
      const [registerArticleOperateForm, { setFieldsValue, resetFields, validate, updateSchema }] =
        useForm({
          labelWidth: 100,
          schemas: articleOperateFormSchema,
          showActionButtonGroup: false,
          actionColOptions: {
            span: 23,
          },
        });

      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        //根据传递过来的参数获取对应的操作，操作不同所对应的界面不同
        //接收父组件传递的数据
        if (data?.op) {
          //判断是否传入op属性
          op.value = data.op;
        }
        if (data?.isreview) {
          isreview.value = data.isreview;
        }
        if (data?.operateType) {
          operateType.value = data.operateType;
        }
        if (data?.dataId) {
          article.id = data.dataId;
        }
        if (data?.articleTitle) {
          article.title = data.articleTitle;
        }
        if (data?.moduleName) {
          moduleName.value = data.moduleName;
        }
        if (moduleName) {
          modalTitle.value = unref(moduleName);
        }
        if (op.value != OperationTypeEnum.UN_KNOWN && op.value != OperationTypeEnum.CUSTOME) {
          modalTitle.value += '--' + op.value;
        }
        if (op.value == OperationTypeEnum.CUSTOME) {
          if (operateType.value === 3) modalTitle.value += '--审核不通过';
          if (operateType.value === 5) modalTitle.value += '--发布撤回';
          if (operateType.value === 9) modalTitle.value += '--删除';
        }

        resetFields();
        setModalProps({ confirmLoading: false });

        if (op.value == OperationTypeEnum.CUSTOME) {
          if (operateType.value === 3 || operateType.value === 5 || operateType.value === 9) {
            let formData = { id: article.id, op: operateType.value, msg: '' };
            setFieldsValue({
              ...formData,
            });
          }
        }
      });

      async function onButtonOkClick() {
        //根据指定的操作类型分别进行提交数据和处理
        if (op.value == OperationTypeEnum.CUSTOME) {
          //对应操作的步骤为：验证表单、提交后台保存、关闭modal、调用父组件事件刷新数据
          try {
            const values = await validate();
            setModalProps({ confirmLoading: true });

            //调用接口进行保存
            if (operateType.value === 3) {
              values.isreview = isreview.value;
              nopassArticle(values)
                .then((res) => {
                  if (!res || Object.keys(res).length == 0) {
                    createMessage.success('操作成功。', 2);
                  }
                  closeModal();
                  emit('success', operateType.value);
                })
                .catch((ex) => {
                  console.log('catch ', ex);
                  createMessage.error(ex.msg);
                });
            } else if (operateType.value === 5) {
              recallArticle(values)
                .then((res) => {
                  if (!res || Object.keys(res).length == 0) {
                    createMessage.success('操作成功。', 2);
                  }
                  closeModal();
                  emit('success', operateType.value);
                })
                .catch((ex) => {
                  console.log('catch ', ex);
                  createMessage.error(ex.msg);
                });
            } else if (operateType.value === 9) {
              deleteArticle(values)
                .then((res) => {
                  if (!res || Object.keys(res).length == 0) {
                    createMessage.success('操作成功。', 2);
                  }
                  closeModal();
                  emit('success', operateType.value);
                })
                .catch((ex) => {
                  console.log('catch ', ex);
                  createMessage.error(ex.msg);
                });
            } else {
              createMessage.error('当前操作类型错误，无法进行对应操作。', 5);
            }
          } finally {
            setModalProps({ confirmLoading: false });
          }
        } else {
          createMessage.error('当前操作类型错误，无法进行对应操作。', 5);
        }
      }

      return {
        op,
        moduleName,
        modalTitle,
        article,
        articleBasicInfoSchema,
        registerModal,
        registerArticleOperateForm,
        onButtonOkClick,
      };
    },
  });
</script>
<style scoped lang="less"></style>
